<template>
  <div>
    <el-card class="search-card">
      <BasicForm
        isInline
        ref="formData"
        actionPosition="start"
        :isScalingBtn="false"
        :colNumOfRow="3.5"
        :formColumns="formItemList"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      />
    </el-card>
    <el-card class="table-card">
      <basic-table
        showActionCol
        :showSelectCol="false"
        :loading="TableInfo.loading"
        :columns="TableInfo.columns"
        :dataSource="TableInfo.list"
        :pagination="pagination"
        :pageSizes="pageSizes"
        :tableHeight="480"
        :actionColWidth="200"
        :actionRender="renderTableBtnAction"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
        @handleHeaderDragend="handleHeaderDragend"
      >
        <!-- 按钮操作栏 -->
        <BtnRender :render="renderBtnsBar" slot="content_context" />
      </basic-table>
    </el-card>
    <LinkCategoryDialog
      :visible.sync="linkCategory.visible"
      :label-uuid="this.labelUuid"
    />
    <LinkGoodsDialog
      :visible.sync="linkGoods.visible"
      :label-uuid="this.labelUuid"
      :rule-type="linkGoods.ruleType"
    />
    <SellRulesDialog
      :visible.sync="sellRules.visible"
      :dialog-type="sellRules.type"
    />
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import BasicTable from '@/components/BasicTable';
import BtnRender from '@/components/JSXRender/BtnRender';
import LinkCategoryDialog from './components/LinkCategoryDialog';
import LinkGoodsDialog from './components/LinkGoodsDialog';
import SellRulesDialog from './components/SellRulesDialog';
import { getBtnsBar, getTableAction } from '@/utils/getBtnsRender';
import { setAuthBtnId } from '@/utils/bizUtils';
import { getInitFormData, TableInfo } from '@/utils/getUtils';
import { FORM_ITEMS, TABLE_COLUMNS } from './constants';
import { RuleEnum, APPLY_VALUES } from './constants/enum'
import basePage from '@/mixins/commodity/basePage';
import { queryLabelListService } from '@/api/commodity/commodityManage/productTagManage';
export default {
  mixins: [basePage],
  components: {
    BasicForm,
    BasicTable,
    BtnRender,
    LinkCategoryDialog,
    LinkGoodsDialog,
    SellRulesDialog
  },
  data () {
    return {
      formItemList: [...FORM_ITEMS],
      formData: getInitFormData(FORM_ITEMS),
      TableInfo: new TableInfo({ columns: TABLE_COLUMNS }),
      labelUuid: '',
      linkCategory: {
        visible: false
      },
      linkGoods: {
        visible: false,
        ruleType: null,
      },
      sellRules: {
        visible: false,
        type: 'edit'
      }
    }
  },
  mounted () {
    this.getTableData();
  },
  methods: {
    // jsx-render渲染按钮操作栏
    renderBtnsBar (h) {
      const btnsBar = [{
        label: '新增',
        type: 'primary',
        size: 'mini',
        method: this.handleAdd,
        icon: 'el-icon-plus',
        hasAuth: true
      }]
      return getBtnsBar(h, btnsBar, this.showBtn, 'start')
    },
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      const actionList = this.getRenderActionList(row)
      return getTableAction({
        h,
        row,
        actionList,
        showBtn: this.showBtn
      })
    },
    // 获取表格操作按钮实例
    getActionBtnVO () {
      const editBtn = { label: '编辑', method: this.handleEdit, hasAuth: true }
      const goodsBtn = { label: '关联商品', method: this.handleLinkGoods, hasAuth: true }
      const categoryBtn = { label: '关联分类', method: this.handleLinkCategory, hasAuth: true }
      const ruleConfigBtn = { label: '规则配置', method: this.handleConfigRules, hasAuth: true }
      const ruleViewBtn = { label: '规则查看', method: this.handleViewRules }
      const viewGoodsBtn = { label: '查看商品', method: this.handleViewGoods }
      const renderBtnMaps = {
        [RuleEnum.Normal]: [editBtn, goodsBtn, categoryBtn], // 普通标签
        [RuleEnum.Core]: [editBtn, ruleConfigBtn, ruleViewBtn, viewGoodsBtn], // 核心标签
        [RuleEnum.SellWell]: [editBtn, ruleConfigBtn, ruleViewBtn, viewGoodsBtn], // 畅销标签
        [RuleEnum.SaleAbsolute]: [editBtn, viewGoodsBtn], // 售价准确性标签
        [RuleEnum.SaleRelate]: [editBtn, viewGoodsBtn], // 售价关联性标签
        [RuleEnum.KeyPoint]: [editBtn, ruleConfigBtn, ruleViewBtn, viewGoodsBtn], // 重点标签
      }
      return {
        editBtn,
        goodsBtn,
        categoryBtn,
        ruleConfigBtn,
        ruleViewBtn,
        viewGoodsBtn,
        renderBtnMaps
      }
    },
    // 获取表格操作按钮集合
    getRenderActionList (row) {
      const {
        editBtn,
        goodsBtn,
        categoryBtn,
        renderBtnMaps,
      } = this.getActionBtnVO()
      // 当前标签是手动打标
      const isManualMarking = row.applyType == APPLY_VALUES.Manual
      // 当前标签是积分或者鑫币
      const isXCoinOrIntegral = [RuleEnum.XCoin, RuleEnum.Integral].includes(row.ruleType)
      let actionList = []
      // 手动打标类型默认展示normal按钮栏
      if (isManualMarking) {
        actionList = [editBtn, goodsBtn, categoryBtn]
      }
      // 手动打标类型的积分和鑫币标签只展示编辑和关联商品按钮
      if (isManualMarking && isXCoinOrIntegral) {
        actionList = [editBtn, goodsBtn]
      }
      // 自动打标类型动态渲染按钮栏
      if (!isManualMarking) {
        actionList = renderBtnMaps[row.ruleType] ?? []
      }
      return actionList
    },
    // 获取表格数据
    async getTableData () {
      setAuthBtnId('查询')
      const data = {
        ...this.formData,
        ...this.paginationParams
      }
      const res = await queryLabelListService(data, this.TableInfo.setLoading)
      if (res?.retData) {
        this.TableInfo.setList(res.retData?.results)
        this.setTotalNum(res.retData?.totalNum)
      }
    },
    // 表列拖拽
    handleHeaderDragend ({ doLayout }) {
      doLayout()
    },
    // 新增
    handleAdd () {
      setAuthBtnId('新增')
      this.$router.push({ name: 'productTagManageAdd' });
    },
    // 编辑
    handleEdit (row) {
      setAuthBtnId('编辑')
      this.$router.push({
        name: 'productTagManageEdit',
        query: { id: row.id }
      });
    },
    // 关联商品
    handleLinkGoods (row) {
      setAuthBtnId('关联商品')
      this.linkGoods.visible = true
      this.labelUuid = row.id
      this.linkGoods.ruleType = row.ruleType
    },
    // 关联分类
    handleLinkCategory (row) {
      setAuthBtnId('关联分类')
      this.linkCategory.visible = true
      this.labelUuid = row.id
    },
    // 规则配置
    handleConfigRules (row) {
      setAuthBtnId('规则配置')
      const coreExecutor = () => { this.$router.push({ name: 'coreRuleConfig' }) } // 核心-规则配置
      const sellExecutor = () => {
        this.sellRules.visible = true
        this.sellRules.type = 'edit'
      } // 畅销-规则配置
      const keyExecutor = () => { this.$router.push({ name: 'keyRuleConfig' }) } // 重点-规则配置
      this.executeDiffTask(row, { coreExecutor, sellExecutor, keyExecutor })
    },
    // 规则查看
    handleViewRules (row) {
      const coreExecutor = () => { this.$router.push({ name: 'coreRuleView' }) } // 核心-规则查看
      const sellExecutor = () => {
        this.sellRules.visible = true
        this.sellRules.type = 'view'
      } // 畅销-规则查看
      const keyExecutor = () => { this.$router.push({ name: 'keyRuleView' }) } // 重点-规则查看
      this.executeDiffTask(row, { coreExecutor, sellExecutor, keyExecutor })
    },
    // 查看商品
    handleViewGoods (row) {
      let executor = name => {
        this.$router.push({ name, query: { ruleType: row.ruleType } })
      }
      const coreExecutor = () => { executor('coreViewGoods') } // 核心-商品查看
      const sellExecutor = () => { executor('sellViewGoods') } // 畅销-商品查看
      const priceExecutor = () => { executor('priceViewGoods') } // 售价准确性-商品查看
      const keyExecutor = () => { executor('keyViewGoods') } // 重点-商品查看
      this.executeDiffTask(row, { coreExecutor, sellExecutor, priceExecutor, keyExecutor })
    },
    // 执行不同的跳转任务（畅销商品和核心商品）
    executeDiffTask (row, { coreExecutor, sellExecutor, priceExecutor, keyExecutor }) {
      const actionMaps = {
        [RuleEnum.Core]: coreExecutor,
        [RuleEnum.SellWell]: sellExecutor,
        [RuleEnum.SaleAbsolute]: priceExecutor,
        [RuleEnum.SaleRelate]: priceExecutor,
        [RuleEnum.KeyPoint]: keyExecutor
      }
      const executor = actionMaps[row.ruleType]
      executor && executor()
    }
  }
}
</script>
